<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<!-- 
			通过 id 查找 HTML 元素 
			通过标签名查找 HTML 元素
			通过类名查找 HTML 元素
			通过 CSS 选择器查找 HTML 元素
			通过 HTML 对象集合查找 HTML 元素
		 -->

		 <div></div>
		 <div id="div1"></div>
		 <div class="div1">
		 	tianjin
		 	<p>beijing</p>
		 </div>
		 <div class="div2"></div>


	<script>
		// 通过 id 查找 HTML 元素
		let div = document.getElementById("div1");
		console.log(div, typeof div);
		
		// 通过标签名查找 HTML 元素
		let divs = document.getElementsByTagName("div");
		console.log(divs, typeof divs); // HTMLCollection
		console.log(divs[0]);

		// 通过类名查找 HTML 元素
		let divs1 = document.getElementsByClassName("div1");
		console.log(divs1, typeof divs1);
		console.log(divs1[0]);


		// 通过 CSS 选择器查找 HTML 元素 
		// 会查询出符合条件的第一个元素
		let div2 = document.querySelector(".div1");
		console.log(div2, typeof div2);


		// 会查询出符合条件的所有元素
		let divs2 = document.querySelectorAll(".div1");
		console.log(divs2, typeof divs2); // NodeList

		
		// HTMLCollection HTML DOM集合
		// HTMLCollection 对象是类数组的 HTML 元素列表（集合）
		// 通过索引号进行访问


		// NodeList
		// NodeList 对象是从文档中提取的节点列表（集合）
		// NodeList 中的元素可通过索引号进行访问。


		// 区别：
		// HTMLCollection 是 HTML 元素的集合。
		// NodeList 是文档节点的集合。

		// 访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
		// 访问 NodeList 项目，只能通过它们的索引号。

		// HTMLCollection 包含元素节点
		// 只有 NodeList 对象能包含属性节点和文本节点。


		








	</script>
	</body>
</html>